<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- css文件 -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- 引入iconfont图标 -->
    <link rel="stylesheet" href="font/font_korxt9xm4/iconfont.css" />
</head>
<style>
    * {
        margin: 0;
        padding: 0;

    }

    /* top */
    .top {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        background-color: #404040;
    }

    .search {
        padding-left: 70%;
        width: 500px;
    }

    .header {
        background-color: #1c84d8;
        height: 134px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .small_header {
        height: 100%;
        width: 990px;

    }

    .sm_hd_top {
        display: flex;
        width: 100%;
        height: 60%;
        margin-top: 10px;
        margin-bottom: 15px;
        justify-content: space-between;
        align-items: center;
    }



    .img1 {
        width: 277px;
        height: 68px;
    }

    .img2 {
        width: 70%;
        height: auto;
    }

    .nav {
        width: 988px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #aa3033;
    }





    .header ul li a {
        font-size: 15px;
        color: #ffffff;
        margin: 7px 18px;

    }

    /* 轮播图 */
    .top_all {
        width: 988px;
        height: 293px;
        margin: 10px auto;
        position: relative;
        overflow: hidden;
    }

    .pic img {
        width: 988px;
        height: 293px;
    }

    .prev,
    .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 97px;
        color: #fff;
        font-size: 20px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .prev {
        right: 0;

    }

    .next span {
        left: 0;
    }

    .iconfont {
        font-size: 52px;
    }

    .bt {

        position: absolute;
        bottom: 10px;
        left: 70%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 20px;
    }


    .bt li {
        margin-right: 3px;
        width: 20px;
        height: 20px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .bt a {

        color: black;
        font-size: 20px;

    }

    .bt li:hover {
        background-color: blue;
    }

    /* text-列表 */
    .body {

        background-color: #f2f2f2;
        height: 910px;
    }




    .bd_md_top {
        width: 993px;
        height: 336px;

        display: flex;
        justify-content: space-between;
    }

    .bd_md_top .left {
        width: 336px;
        height: 100%;
        background-color: #ffffff;
        border: #6c5d5d solid 1px;
    }

    .bd_md_top .mid {
        width: 336px;
        height: 100%;
        background-color: #ffffff;
        border: #6c5d5d solid 1px;
    }

    .bd_md_top .right {
        background-color: #ffffff;

        border: #6c5d5d solid 1px;
    }

    .right .head .left {
        background-color: #f6f6f6;
        display: flex;
        height: 42px;
        margin-top: -5px;
    }

    .right .head .left a.two {
        display: block;
        line-height: 42px;
        padding-left: 14px;
    }

    .right .head .left a.one {
        display: block;
        width: 180px;
        height: 100%;
        line-height: 42px;
        border-right: #6c5d5d solid 1px;
        font-size: 20px;
        color: #1c84d8;
        font-weight: bold;
        padding-left: 15px;
    }

    .head a.right {
        display: block;
        padding: 15px;
        margin-top: -5px;
        border: none;
    }

    .bd_md_top .left span {
        width: 336px;
        height: 38px;
        background-color: beige;
    }

    h1 {
        font-size: 20px;
        display: block;

        height: 38px;
        background-color: #fff;
        border-bottom: #6c5d5d solid 1px;
    }

    h1 p {
        padding: 10px;
    }

    h2 {
        box-sizing: border-box;
        display: block;
        height: 25px;
        width: 336px;
        font-size: 18px;
        margin-top: 17px;
    }

    .pic_text img {
        width: 80px;
        height: 60px;
        margin-top: 20px;
        margin-left: 8px;
    }

    .pic_text {
        display: flex;
        height: 110px;
        width: 336px;


    }

    .explain {
        overflow: auto;
        height: 53px;
        width: 224px;
        margin-top: 20px;
    }

    ul.bottom {
        display: block;
        height: 128px;
        background-color: #ffffff;
        border-top: #000000 solid 1px;
        padding: 7px;

    }

    .bottom li {
        list-style-type: disc;
        margin-left: 20px;
        font-size: 14px;
    }


    ul.new li::before {
        content: "";
        /* 在每个 `li` 元素之前插入一个空内容 */
        width: 12px;
        /* 设置伪元素的宽度为 6 像素 */
        height: 12px;
        /* 设置伪元素的高度为 6 像素 */
        display: inline-block;
        background: #ff0000;
        vertical-align: middle;
        /* 垂直对齐到中间 */
        margin-right: 14px;
        /* 伪元素与列表项内容之间的右边距为 14 像素 */
        margin-left: 5px;

    }

    .new li:nth-child(2)::before {
        background: #ff8c00;
    }

    .new li:nth-child(3)::before {
        background: #100a04;
    }

    .new li:nth-child(4)::before {
        background: #0fa86b;
    }

    .new li:nth-child(5)::before {
        background: #c1c2c1;
    }

    .new li:nth-child(6)::before {
        background: #c1c2c1;
    }

    .new li:nth-child(7)::before {
        background: #c1c2c1;
    }

    .new li:nth-child(8)::before {
        background: #c1c2c1;
    }


    .new {
        padding: 10px;

    }

    .new li {
        font-size: 14px;
        line-height: 28px;
        display: flex;
        align-items: center;
        position: relative;

        a {
            font-size: small;
            display: block;
            position: absolute;
            right: 10px;

        }
    }

    .nav ul {
        display: flex;
    }


    .bd_md_top {
        display: flex;
        margin-left: 295px;
    }

    .bd_md_top .lf {
        display: flex;

    }

    .right .head {
        display: flex;
        align-items: center;
        height: 48px;
    }

    .head .left {
        height: 100%;
        width: 246px;
    }


    .search span button {
        border-radius: 0px 10px 10px 0px;
        width: 52px;
        height: 24px;
    }

    input {
        width: 239px;
        height: 20px;
        border-radius: 10px 0px 0px 10px;
    }

    .head button {
        height: 39px;

    }

    /* 精灵图 */
    .box {
        display: flex;
        width: 700px;
        height: 68px;

        background-image: linear-gradient(#5b82ad, #4d627d, #7691ae);
    }

    .box .sm_box {
        height: 53px;
    }

    .sm_box p {
        margin-top: 10px;
    }

    .box .sm_box span {
        display: inline-block;
        width: 28px;
        height: 28px;
        background: url(./images/8picsprites.png) -170px -28px;
        /* -170px 0px等同于 background-position: -170px 0px; 移动背景图 */
    }

    .box .sm_box span:hover {
        /* 划过时当前元素延时1秒 */
        transition: 1s;
    }

    .box .sm_box:nth-child(1) span {
        background-position: -170px -28px;
    }

    .box .sm_box:nth-child(1) span:hover {
        background-position: -170px 0px;
    }

    .box .sm_box:nth-child(2) span {
        background-position: -255px -3px;
    }

    .box .sm_box:nth-child(2) span:hover {
        background-position: -255px -29px;
    }

    .box .sm_box:nth-child(3) span {
        background-position: -341px 0px;
    }

    .box .sm_box:nth-child(3) span:hover {
        background-position: -341px -29px;
    }

    .box .sm_box:nth-child(4) span {
        background-position: -426px 0px;
    }

    .box .sm_box:nth-child(4) span:hover {
        background-position: -426px -29px;
    }

    .box .sm_box:nth-child(5) span {
        background-position: -518px 0px;
    }

    .box .sm_box:nth-child(5) span:hover {
        background-position: -518px -29px;
    }

    .box .sm_box:nth-child(6) span {
        background-position: -596px -3px;
    }

    .box .sm_box:nth-child(6) span:hover {
        background-position: -596px -29px;
    }

    .box .sm_box:nth-child(7) span {
        background-position: -681px -3px;
    }

    .box .sm_box:nth-child(7) span:hover {
        background-position: -681px -29px;
    }

    .box .sm_box:nth-child(8) span {
        background-position: -852px 0px;
    }

    .box .sm_box:nth-child(8) span:hover {
        background-position: -852px -29px;
    }



    .box {
        align-items: center;
        justify-content: space-around;
    }
</style>

<body>
    <div class="all">
        <div class="top">
            <div class="search">
                <input type="text" placeholder="请输入关键词" />
                <span><button>搜索</button></span>
            </div>
        </div>
        <div class="header">
            <div class="small_header">
                <div class="sm_hd_top">
                    <img class="img1" src="./images/a_03.jpg" alt="">
                    <div class="box">
                        <div class="sm_box"><span></span>
                            <p>游戏</p>
                        </div>
                        <div class="sm_box"><span></span>
                            <p>新闻</p>
                        </div>
                        <div class="sm_box"><span></span>
                            <p>锋科技</p>
                        </div>
                        <div class="sm_box"><span></span>
                            <p>锋观点</p>
                        </div>
                        <div class="sm_box"><span></span>
                            <p>评测</p>
                        </div>
                        <div class="sm_box"><span></span>
                            <p>论坛</p>
                        </div>
                        <div class="sm_box"><span></span>
                            <p>威锋源</p>
                        </div>
                        <div class="sm_box"><span></span>
                            <p>威锋商城</p>
                        </div>

                    </div>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">网站建设</a></li>
                        <li><a href="#">成功案例</a></li>
                        <li><a href="#">基础服务</a></li>
                        <li><a href="#">客服服务</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="small_body">
                <div class="body_top">
                    <div class="top_all">
                        <ul class="pic">
                            <li id="a1"><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
                            <li id="a2"><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
                            <li id="a3"><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
                            <li id="a4"><a href="#"><img src="./images/banner4.jpg" alt=""></a></li>
                        </ul>

                        <!-- 箭头 -->

                        <a href="#" class="prev"><span class="iconfont icon-jiantou-left">&#xe60c;</span></a>
                        <a href="#" class="next"><span class="iconfont icon-jiantou-right">&#xe60b;</span></a>

                        <!-- 方块 -->
                        <ul class="bt">
                            <li><a href="#a1">1</a></li>
                            <li><a href="#a2">2</a></li>
                            <li><a href="#a3">3</a></li>
                            <li><a href="#a4">4</li>
                        </ul>
                    </div>
                </div>
                <div class="body_mid">
                    <div class="bd_md_top">
                        <div class="lf">
                            <div class="left">

                                <h1>
                                    <p>房产</p>
                                </h1>

                                <div class="text">
                                    <h2>上海再现开发商抢地 张江地块酸辛击溃</h2>
                                    <div class="pic_text">
                                        <img src="./images/c_03.jpg" alt="">
                                        <div class="explain">
                                            10月22日，上海浦东新区张江南去配套或基地A3-04宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜
                                        </div>
                                    </div>


                                    <ul class="bottom">
                                        <li>给i建设开工配如果高尚的人格</li>
                                        <li>书管理社工了是键盘接口评价</li>
                                        <li>1公司如果开发了客观艰苦</li>
                                        <li>1个人感觉饿哦怕公积金</li>
                                        <li>1 二公司热狗还是个图 光和热是给</li>
                                        <li>1热火干涉然后他回家</li>
                                        <li>1 鹅黄色还是替换他</li>
                                        <li>1 而是如何改善5让一个所以</li>
                                    </ul>
                                </div>

                            </div>
                            <div class="mid">
                                <h1>
                                    <p>消费</p>
                                </h1>

                                <div class="text">
                                    <h2>上海再现开发商抢地 张江地块酸辛击溃</h2>
                                    <div class="pic_text">
                                        <img src="./images/c_05.jpg" alt="">
                                        <div class="explain">
                                            10月22日，上海浦东新区张江南去配套或基地A3-04宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜4宅邸块吸引力十三家知名企业参与竞拍，对论激烈竞争后，由上海获胜
                                        </div>
                                    </div>


                                    <ul class="bottom">
                                        <li><img src="./images/dian_03.jpg" alt="">给i建设开工配如果高尚的人格</li>
                                        <li>书管理社工了是键盘接口评价</li>
                                        <li>1公司如果开发了客观艰苦</li>
                                        <li>1个人感觉饿哦怕公积金</li>
                                        <li>1 二公司热狗还是个图 光和热是给</li>
                                        <li>1热火干涉然后他回家</li>
                                        <li>1 鹅黄色还是替换他</li>
                                        <li>1 而是如何改善5让一个所以</li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                        <div class="right">
                            <div class="head">
                                <div class="left">
                                    <a href="#" class="one">区域</a>
                                    <a href="#" class="two">排名</a>
                                </div>
                                <a href="#" class="right">西部</a>
                            </div>
                            <ul class="new">
                                <li>Firefox火狐浏览器 52.0 <a href="#">18-19-22</a></li>
                                <li>Chrome谷歌浏览器 57.0<a href="#">18-19-22</a></li>
                                <li>360安全浏览器 5.0<a href="#">18-19-22</a>/li>
                                <li> QQ浏览器 6.0<a href="#">18-19-22</a></li>
                                <li> 搜狗浏览器 1.0<a href="#">18-19-22</a></li>
                                <li> 360浏览器 6.0<a href="#">18-19-22</a></li>
                                <li> 搜狗输入法 1.0<a href="#">18-19-22</a></li>
                                <li> 百度浏览器 5.0<a href="#">18-19-22</a></li>
                            </ul>

                        </div>

                    </div>
                    <div class="bd_md_bottom">
                        <div class="left">
                            <div class="top">
                                <div class="one"><img src="./images/d_06.jpg" alt="">
                                    <p style="color: #1c84d8;">电子邮件</p>
                                </div>
                                <div class="two"><img src="./images/d_08.jpg" alt="">
                                    <p>电子邮件</p>
                                </div>
                            </div>

                            <div class="bottom">
                                <div class="one1"><img src="./images/d_13.jpg" alt="">
                                    <p>电子邮件</p>
                                </div>
                                <div class="two1"><img src="./images/d_14.jpg" alt=""">
                                    <p>电子邮件</p>
                                </div>
                            </div>

                        </div>
                        <div class=" right">
                                    <div class="_1">
                                        <img class="lt_pic" src="./images/d_03.jpg" alt=""><a href="#">开课通知</a>
                                        <img class="rt_pic" src="./images/d_03.jpg" alt="">
                                    </div>
                                    <div class=" _2">
                                        <span>课程内容</span>
                                        <span>开办日期</span>
                                        <span>开办情况</span>
                                        <span>在线咨询</span>
                                    </div>
                                    <div class="_3">
                                        <span>Jave Andorid 软件工程师实训班</span>
                                        <span>2013-09-11</span>
                                        <span>已开课</span>
                                        <span style="color: #aa3033;">在线咨询</span>
                                    </div>
                                    <div class="_4">
                                        <span>Jave Andorid 软件工程师实训班</span>
                                        <span>2013-09-11</span>
                                        <span>已开课</span>
                                        <span style="color: #aa3033;">在线咨询</span>
                                    </div>
                                    <div class="_5">
                                        <span>Jave Andorid 软件工程师实训班</span>
                                        <span>2013-09-11</span>
                                        <span>已开课</span>
                                        <span style="color: #aa3033;">在线咨询</span>
                                    </div>
                                    <div class="_6">
                                        <span>Jave Andorid 软件工程师实训班</span>
                                        <span>2013-09-11</span>
                                        <span>已开课</span>
                                        <span style="color: #aa3033;">在线咨询</span>
                                    </div>
                                    <div class="_7">

                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>

                </div>
                <div class="the_bottom">
                    <div>Copyright @ 2024 每日经济新闻报社版权所有,未经允许可不得转载使用,违者必究</div>
                    <div><a href="#">广告热线</a> 北京:010-82978888 电话：010-82978888 传真：010-82978888 邮箱：2577985792
                    </div>
                    <div><a href="#">读者热线</a> 400-800-1234 地址：北京市海淀区西二旗北路10号院1号楼101室</div>
                </div>

            </div>
</body>

</html>